<template>
	<view class="login-page">
		<view class="title">用户登录</view>

		<view class="form">
			<u--input v-model="form.phone" placeholder="请输入手机号" prefixIcon="phone" border="bottom" clearable></u--input>

			<u--input v-model="form.password" placeholder="请输入密码" prefixIcon="lock" border="bottom" type="password"
				clearable style="margin-top: 30rpx;"></u--input>

			<u-button type="primary" shape="circle" text="登录" @click="handleLogin"
				style="margin-top: 60rpx;"></u-button>
		</view>

		<view class="tips">
			<text>未注册手机号将自动创建账户</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue'
	import {
		useUserStore
	} from '@/store/user'

	const userStore = useUserStore()

	// 登录表单
	const form = reactive({
		phone: '',
		password: ''
	})

	// 登录事件
	const handleLogin = async () => {
		if (!form.phone || !form.password) {
			return uni.showToast({
				title: '请输入手机号和密码',
				icon: 'none'
			})
		}

		const res = await userStore.login(form)
		if (res && res.code === 200) {
			// 登录成功后延迟跳转，让用户看到提示
			setTimeout(() => {
				// 获取来源页面
				const pages = getCurrentPages()
				if (pages.length > 1) {
					// 如果有上一页，返回上一页
					uni.navigateBack({
						delta: 1
					})
				} else {
					// 否则跳转到个人中心
					uni.switchTab({
						url: '/pages/person/person'
					})
				}
			}, 500)
		}
	}
</script>

<style scoped>
	.login-page {
		padding: 100rpx 60rpx;
	}

	.title {
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 80rpx;
	}

	.form {
		display: flex;
		flex-direction: column;
	}

	.tips {
		margin-top: 60rpx;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}
</style>